echarts 手撸简单动态markLine |
您所在的位置：网站首页 › echarts 动态折线图 › echarts 手撸简单动态markLine |
echarts 手撸简单动态markLine
|
“其实echarts默认是不支持动态markLine的.”
咳咳,为了不触发我的flag属性,我改一下我刚刚的发言
截止2018年11月14日,本人还没有看到echarts官档上支持动态markLine.
这就让我很尴尬了啊.因为我接到一个需求. 这个需求呢,是这样的: 画个图, 三条线, 一个代表上限, 一个代表下限, 一个是实际值. 实际值超过上限或者下限的地方标红一下. 实际内容下来了之后呢…我就有点懵逼了… 怎么这个上限和这个下限还是个数组格式的呢… 老规矩, 先百度, 心中默念, 来来来, 来来来, 来个不用改就可以直接用的代码吧~~ 什么都没有!!! 别人公司的需求都不上班的吗!!!
行吧行吧,我想想办法…想想办法…啊啊啊啊啊啊啊啊啊啊我靠,echarts也不是我开发的啊 它支不支持我怎么知道啊啊啊啊啊啊啊啊…有毒吧有毒吧… 好吧, 我热爱这个世界…啊啊啊啊啊啊啊啊啊啊啊… 热爱世界…热爱世界…冷静…冷静… 其实我的思路也很简单= =markLine也是line, 我做两个line放上去也行吧 实现思路: 做两条模拟仿真MarkLine线说干咱就干,这个线其实画起来也挺简单的
看看这个样式是不是很像markLine. option = { xAxis: { type: 'value', data: [0,1,2] }, yAxis: { type: 'value' }, series: [{ data: [0,1,2], type: 'line', symbol: 'none', // 不要有每个点默认的那个小圆球 lineStyle: { normal: { color: 'gray', // 颜色置灰 width: 1, // 宽度1就行了 type: 'dashed' // line样式为虚线 } } }] };好的,我们现在有这个MarkLine线了,可以在data里面自己填充数据. 我再看一下这个需求,嗯?超过还要红色的线??? 啊啊啊啊啊啊啊啊啊啊我刀呢我刀呢我刀呢!!! 人间不值得…
看了一眼自己的银行卡余额,算了算了,回来继续写… 实现思路: 把点集合拆开,不要放到一个series里面怎么个意思? 就是说,我每两个点做一个小线段,高于max MarkLine, 低于min MarkLine的我就写它的itemStyle为红色,别的我就写黑色;我定义了两个变量: const red: any = { type: 'line', data: [], lineStyle: {normal: {color: 'red'}}}; const normal: any = { type: 'line', data: [], lineStyle: { normal: {color: 'black'}}};可以说是相当简单了,下图示例是对应的程序部分 a代表当前实际值的坐标, b代表下一个实际值的坐标 c代表当前最大值的坐标,d代表下一个最大值的坐标 e代表当前最小值的坐标,f代表下一个最小值的坐标 这边特别说明一点就是,我这样来写是因为当x轴和y轴都是value类型的时候, echart支持在series中data:[[0,1], [1,2]]这种写法,x轴和y轴组成一个直角坐标系, 每一个[x, y]都表示一个点,默认是按顺序将data里面的点连起来不明白的可以去看看官方示例: http://echarts.baidu.com/examples/editor.html?c=line-pen (之前特别留意了这个特性是因为觉得空闲的时候可以用echarts画个画什么的,没想到还可以在这种地方有正经用途…) if (a.y > c.y && b.y > d.y) { red.data = [a, b]; series.push(red); } else if (a.y normal.data = [a, b]; series.push(normal); }emmmmmmmmmmmmmmmmmm展示一下效果图
这这这…虽然知道肯定会在精度方面有些问题,没想到居然这么丑… 出现这个的原因吧,是因为每两个数据点之间太宽了,我自己造的数据太少了,就出现了这个情况. 但是实际情况中也会有这种情况. 强迫症如我那肯定是忍不了忍不了忍不了…唉,改吧改吧… 下面我们开始复习初中基础课程—二元一次方程组下面是我写的func, 将两条线ab和cd之间的交点求出,并将线段ab切成两部分ax, xb 这个n1, n2就是我们y=kx + c的参数k, c1, c2就是参数c (不知道是不是因为预感今天要做这个需求,昨晚我还梦见了我初中数学老师,噩梦阿…骂了我整整一宿, 不过也说不定是因为昨天我在做傅里叶变换的需求= =,唉,最近都是数学相关的, 不做噩梦才怪) cross(a, b, c, d) { const n1 = (b.y - a.y) / (b.x - a.x); const n2 = (d.y - c.y) / (d.x - c.x); const c1 = b.y - n1 * b.x; const c2 = d.y - n2 * d.x; const x = ( c2 - c1 ) / ( n1 - n2 ); const y = n1 * x + c1; return [[a, [x,y]], [[x, y], b]] }好了,交点也求出来了. 将之前的if…else…完善一下 if (a.y > c.y && b.y > d.y) { red.data = [a, b]; series.push(red); } else if (a.y const data = this.cross(a, b, c, d); red.data = data[0]; series.push(red); normal.data = data[1]; series.push(normal); } else if((a.y d.y)) { const data = this.cross(a, b, c, d); red.data = data[1]; series.push(red); normal.data = data[0]; series.push(normal); } else if ((a.y > e.y && b.y const data = this.cross(a, b, e, f); red.data = data[0]; series.push(red); normal.data = data[1]; series.push(normal); } else { normal.data = [a, b]; series.push(normal); }附上效果图(像tooltip修改formatter什么做显示上的修改,细节部分大家都自己按照自己的需求进行修改吧,就不是很麻烦了)
我觉得我写得可以说是精细入微了,从研究思路到具体操作都一步步写的清清楚楚了. 没看懂就多看几遍吧, 基本都是遇到我觉得网上找不到的内容才会写在博客里. |
【本文地址】
今日新闻 |
推荐新闻 |